<template>
  <div v-if="tags.length > 0"
    class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-xl dark:bg-stone-950 dark:border-gray-700 shadow-md">
    <!-- 标签标题 -->
    <div class="flex mb-3">
      <h2 class="flex items-center font-bold text-gray-900 uppercase dark:text-white">
        标签
      </h2>
      <span class="grow"></span>

      <el-tooltip content="查看更多" placement="bottom">
        <!-- 查看更多 -->
        <a @click="router.push('/tag/list')"
          class="bg-white flex items-center px-2.5 py-1 text-xs font-medium text-center text-gray-900 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700">
          <svg-icon name="more" class="w-5 h-5 dark:text-white" aria-hidden="true" />
        </a>
      </el-tooltip>

    </div>
    <!-- 标签列表 -->
    <span v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)"
      class="inline-block mb-1 cursor-pointer bg-green-50 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
      {{ tag.name }}
    </span>
  </div>
</template>

<script setup>
import { getTagList } from "@/api/frontend/tag";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
// 所有标签
const tags = ref([]);
const size = ref(12);
getTagList({ size: size.value }).then((res) => {
  if (res.success && res.data != null) {
    tags.value = res.data;
  }
});

// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
  console.log(id, name);
  // 跳转时通过 query 携带参数（标签 ID、标签名称）
  router.push({ path: "/tag/article/list", query: { id, name } });
};
</script>
